<template>
	<view class="address_navigate">
		<view class="address-title">
			<img src="/static/address/icon_address_position.svg" style="width: 40rpx;height: 40rpx;margin-right: 20rpx;" alt="" />
			郎溪县实验小学斜对面 888号
		</view>
		
		<view class="map-box">
			<img src="/static/address/icon_store_address.png" style="width: 100%;" alt="" />
		</view>
		
		<view class="address-btn">
			<up-button color="#333333" shape="circle" :customStyle="{height: '100%',borderRadius: 0}" text="前往导航" @click="handle_get_navigate_map"></up-button>
		</view>
	</view>
</template>

<script setup>
	
	// 调起外部导航
	const handle_get_navigate_map = () => {
		uni.getLocation({
			type: 'gcj02', //返回可以用于uni.openLocation的经纬度
			success: function (res) {
				const latitude = res.latitude;
				const longitude = res.longitude;
				uni.openLocation({
					latitude: latitude,
					longitude: longitude,
					success: function () {
						console.log('success');
					}
				});
			}
		});
	}
	
</script>

<style lang="scss">
	.address_navigate{
		width: 100%;
		height: 100vh;
		
		.address-title{
			width: 100%;
			min-height: 70rpx;
			height: fit-content;
			line-height: 1.5;
			display: flex;
			align-items: center;
			font-size: 30rpx;
			color: #333333;
			padding: 0 20rpx;
			box-sizing: border-box;
		}
		
		.map-box{
			width: 100%;
			height: 500rpx;
		}
		
		.address-btn{
			width: 80%;
			height: 80rpx;
			margin-top: 50rpx;
			margin: 0 auto;
			border-radius: 60rpx;
			overflow: hidden;
		}
	}
</style>